<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<style type="text/css">
		#welcome .hdw{
	        margin-top: 3rem;
	        animation: hdw 2s infinite;
    	}
		.hdw a{
		    color: white;
		}    	
		@-webkit-keyframes hdw{
			0%{opacity: 0;}
			50%{opacity: 1;}
			100%{opacity: 0;}
		}    	
	</style>
</head>
<body>
	<!-- 欢迎界面遮罩 -->
	<div id="welcome">
		<h1>看你有多色</h1>
		<p>找出颜色不同的一个</p>
		<div class="btnwrap">
			<button id="start" onclick="start()">开始游戏</button>
		</div>
		<p class="hdw" href="http://www.houdunwang.com">后盾网人人做后盾</p>
	</div>
	<!-- 结束界面遮罩 -->
	<div id="over">
		<h1 id="userLevel">L1你是瞎子</h1>
		<div class="buttonwrap">
			<button onclick="start()">点我重玩</button>
		</div>
	</div>
	<!-- 遮罩下面的内容 -->
	<div id="content">
		<!-- 分数和时间 -->
		<div id="scorewrap">得分：<span id="score">0</span></div>
		<p id="time"></p>
		<!-- 放方块的盒子 -->
		<div id="box">
			
		</div>
	</div>
</body>
<script type="text/javascript">
	var color = function(){
		//原生对象
		this.hdEle = document.getElementById("box");
		//浏览器的宽高
		this.innerW = window.innerWidth;
		this.innerH = window.innerHeight;
		//容器宽高
		this.hdEleW = this.innerW;
		this.hdEleH = this.innerW;
		//有色方块的数组
		this.hdRecArr = [];
		//默认等级1
		this.level = 1;
		//最高等级
		this.maxLevel = 8;
		//默认间隔
		this.jiange = 10;
		//正确的index
		this.RightIndex;
		//分数
		this.score = 0;
		//初始时间
		this.time = 20;
		var hdThis = this;
		//执行程序
		this.hdRun = function(){
			//开始游戏
			this.hdStart();
			//填充有色方块
			this.hdCreateRect();
		}
		//填充有色方块
		this.hdCreateRect = function(){
			//如果box有子节点的话,全部都清楚
			while (this.hdEle.hasChildNodes()){
				this.hdEle.removeChild(this.hdEle.firstChild);
			}
			//获得box的宽度
			var w = this.hdEle.clientWidth;
			//间隔--
			if(this.level<this.maxLevel){
				this.jiange--;
			}
			//计算所有方块的宽度
			var lefW = w - this.level * this.jiange;
			//计算每个方块的宽度
			var everyW = lefW/(this.level + 1);
			//随机颜色
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			//循环方块
			for(var i =0;i<(this.level+1) * (this.level+1);i++){
				var span = document.createElement("span");
				//每一个span的宽
				span.style.width = everyW + "px";
				span.style.height = everyW + "px";
				span.style.background = 'rgb('+r+','+g+','+b+')';
				span.style.display = 'block';
				span.style.float = 'left';
				//如果不是第一列有margin-left
				if(i%(this.level+1)){
					span.style.marginLeft = this.jiange + "px";
				}
				//如果不是第一行有margin-top
				if(i>=(this.level+1)){
					span.style.marginTop = this.jiange + "px";
				}
				//插入
				this.hdEle.appendChild(span);
			}
			//随机抓一个span变色
			var span = this.hdEle.getElementsByTagName("span");
			var randIndex = Math.floor(Math.random() * span.length);
			//颜色稍微改变一下
			r += 15;
			g += 15;
			b += 15;
			span[randIndex].style.background = 'rgb('+r+','+g+','+b+')';
			//赋值给正确的index
			this.rightIndex = randIndex;
			//检测用户点击
			this.hdCheck();
		}
		//检测用户点击
		this.hdCheck = function(){
			//获得所有方块
			var span = this.hdEle.getElementsByTagName('span');
			for(var i=0;i<span.length;i++){
				span[i].index = i;
				span[i].onclick = function(){
					//如果点击正确
					if(this.index==hdThis.rightIndex){
						if(hdThis.level<hdThis.maxLevel)
						{
							hdThis.level++;
						}
						//重新创建
						hdThis.hdCreateRect();
						//分数+1；
						hdThis.score++;
						document.getElementById("score").innerHTML = hdThis.score;
					}
				}
			}
		}
		//填充有色方块结束
		//初始化
		this.hdInit = function(){
			//设置欢迎页面高
			document.getElementById('welcome').style.height = this.innerH + "px";
			//设置结束页面高度
			document.getElementById('over').style.height = this.innerH + "px";
			//渲染画布高，因为中间是小正方形，画布也是小正方形
			this.hdEle.style.height = this.innerW + "px";
		}
		//开始游戏
		this.hdStart = function(){
			//点击开始游戏，欢迎页面小时
			document.getElementById("welcome").style.display =  "none";
			document.getElementById('over').style.display = "none";
			//获得显示用户等级的元素
			var userLevel = document.getElementById("userLevel");
			//先把时间写进去
			var timeEle = document.getElementById("time");
			timeEle.innerHTML = this.time;
			//定时器开始
			var time = this.time;
			var timer = setInterval(function(){
				//判断时间到了
				if(time == 0){
					//判断分数
					switch(true){
						case hdThis.score<8:
							userLevel.innerHTML = 'L1你是瞎子!';
							break;
						case hdThis.score<20:
							userLevel.innerHTML = 'L2猫的眼神!';
							break;
						case hdThis.score<30:
							userLevel.innerHTML = 'L3猎鹰的眼睛!!';
							break;			
						case hdThis.score<40:
							userLevel.innerHTML = 'L4GOD的视力!!!';
							break;									
						default:
							userLevel.innerHTML = 'L999别玩了！太厉害了';
							break;
					}
					//结束界面显示
					document.getElementById('over').style.display = "block";
					clearInterval(timer);
					return;
				}			
				time--;
				timeEle.innerHTML = time;
			},1000);
		}
		//开始游戏结束
	}
	//实例化对象
	var obj = new color;
	obj.hdInit();
	//点击开始按钮触发
	function start(){
		//等级恢复到1
		obj.level = 1;
		//分数归零
		obj.score = 0;
		//间隔恢复到10
		obj.jiange = 10;
		obj.hdRun();
	}
</script>
</html>




























